{extend name="light-year/layout/master/detail" /}

{block name="title"}配置管理{/block}
{block name="page-title"}配置{/block}

{block name="content"}
<input name="config_id" class="form-control" type="hidden" value="{if $detail}{$detail->config_id}{/if}" />
<div class="form-group">
    <label><span class="text-danger">*</span> 配置标题：</label>
    <input type="text" class="form-control" name="config_title" value="{if $detail}{$detail->config_title}{/if}" placeholder="输入配置标题" />
    <small class="help-block">
        <i class="mdi mdi-information"></i>
        唯一标识
    </small>
</div>
<div class="form-group">
    <label><span class="text-danger">*</span> 配置名称：</label>
    <input type="text" class="form-control" name="config_name" value="{if $detail}{$detail->config_name}{/if}" placeholder="输入配置名称" />
    <small class="help-block">
        <i class="mdi mdi-information"></i>
        英文字符串
    </small>
</div>
<div class="form-group">
    <label><span class="text-danger">*</span> 配置类型：</label>
    <div class="form-controls">
        <select name="config_type" class="form-control" required onchange="config_type_change(this)">
            <option value="0"> 请选择配置类型 </option>
            {if !empty($config_type_list)}
                    {foreach $config_type_list as $key => $config_type}
                    <option value="{$key}" {if ($detail && $key === $detail->config_type)}selected{/if}> {$config_type} </option>
                {/foreach}
            {/if}
        </select>
    </div>
    <small class="help-block">
        <i class="mdi mdi-information"></i>
        系统会根据不同类型解析配置值
    </small>
</div>
<div class="form-group">
    <label><span class="text-danger">*</span> 配置分组：</label>
    <div class="form-controls">
        <select name="config_group" class="form-control" required>
            <option value="0"> 请选择配置分组 </option>
            {if !empty($config_group_list)}
                {foreach $config_group_list as $key => $config_group}
                    <option value="{$key}" {if ($detail && $key === $detail->config_group)}selected{/if} > {$config_group} </option>
                {/foreach}
            {/if}
        </select>
    </div>
    <small class="help-block">
        <i class="mdi mdi-information"></i>
        用于区分展示列表！
    </small>
</div>
<div class="form-group">
    <label> 配置值：</label>
    <div class="form-controls config-value-html">
        {if $detail && $detail->config_type == 6 }
            <div id="test-editor" name="config_value">
                <textarea style="display:none;" name="config_value">{if $detail}{:htmlspecialchars_decode($detail->config_value)}{/if}</textarea>
            </div>
        {elseif $detail && $detail->config_type == 5 /}
            <div>
                <input type="hidden" name="config_value" value="{if $detail}{:htmlspecialchars_decode($detail->config_value)}{/if}"/>
                <div id="config_value">
                    <div id="config_value_filePicker"><i class="icon-cloud-upload"></i></i> 选择单张图片</div>
                </div>
            </div>
            <small class="help-block">
                <i class="mdi mdi-information"></i>
                配置的封面图
            </small>
        {else /}
            <textarea class="form-control" rows="5" name="config_value" placeholder="请输入配置值" >{if $detail}{:htmlspecialchars_decode($detail->config_value)}{/if}</textarea>
        {/if}
    </div>
</div>
<div class="form-group">
    <label> 配置项：</label>
    <textarea class="form-control" rows="5" name="config_extra" placeholder="请输入配置项" >{if $detail}{:htmlspecialchars_decode($detail->config_extra)}{/if}</textarea>
    <small class="help-block">
        <i class="mdi mdi-information"></i>
        如果是枚举型，需要配置该项！
    </small>
</div>
<div class="form-group">
    <label> 排序：</label>
    <input type="number" class="form-control" name="config_sort" value="{if $detail}{$detail->config_sort}{else/}0{/if}" placeholder="输入排序" />
    <small class="help-block">
        <i class="mdi mdi-information"></i>
        从小到大，升序
    </small>
</div>
<div class="form-group">
    <label> 备注：</label>
    <textarea class="form-control" rows="5" name="config_remarks" placeholder="请输入配置备注" >{if $detail}{:htmlspecialchars_decode($detail->config_remarks)}{/if}</textarea>
    <small class="help-block">
        <i class="mdi mdi-information"></i>
        配置项的具体说明详情！
    </small>
</div>
<div class="form-group">
    <label>
        是否启用：
    </label>
    <div class="clearfix">
        <label class="lyear-radio radio-inline radio-primary">
            <input type="radio" name="is_check" value="0" {if (empty($detail) || $detail->is_check === 0) }checked{/if}><span>禁用</span>
        </label>
        <label class="lyear-radio radio-inline radio-primary">
            <input type="radio" name="is_check" value="1" {if (empty($detail) || $detail->is_check === 1) }checked{/if}><span>启用</span>
        </label>
    </div>
</div>
<hr>
<div class="form-group">
    <button type="submit" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
    <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
</div>
{/block}

{block name="script"}
{include file="light-year/layout:plugins/webuploader" /}
{include file="light-year/layout:plugins/editormd" /}

<script type="text/javascript">
    let detail = JSON.parse('{:html_get_res_from_admin($detail)}');
    window.onload = function () {
        closeLayerLoading(closeAllLayer);

        // 图片上传组件
        initWebUploader();

        // 详情图片渲染（使用这种方式，可以共用图片上传限制等功能）
        if (detail && !isEmpty(detail.config_value)){
            setImage(detail.config_value);
        }
    }

    function initWebUploader()
    {
        // 图片上传组件
        webUploaderImgs('#config_value_filePicker', '', '#config_value', 'input[name=config_value]', {'img_limit':1, 'single_graph_type':1});
    }

    function setImage(config_value)
    {
        $('#config_value').append(webUploaderImgHtml(config_value, 'input[name=config_value]', $('#config_value_filePicker').attr('span-class')));
    }

    function config_type_change(_this) {
        str = '{if $detail}<?=html_get_res_from_admin(htmlspecialchars_decode($detail->config_value))?>{/if}';
        switch (parseInt($(_this).val())) {
            case 6: // 富文本
                $('.config-value-html').html('<div id="test-editor" name="config_value"><textarea style="display:none;" name="config_value">' + str + '</textarea></div>');
                editor_md();
                break;
            case 5: // 图片
                $('.config-value-html').html(
                    '<div>' +
                    '    <input type="hidden" name="config_value" value="' + str + '"/>' +
                    '    <div id="config_value">' +
                    '        <div id="config_value_filePicker"><i class="icon-cloud-upload"></i></i> 选择单张图片</div>' +
                    '    </div>' +
                    '</div>' +
                    '<small class="help-block">' +
                    '    <i class="mdi mdi-information"></i>' +
                    '    配置的封面图' +
                    '</small>'
                    );
                if (detail.config_value) {
                    setImage(detail.config_value);
                }else{
                    initWebUploader();
                }
                break;
            default:
                $('.config-value-html').html('<textarea class="form-control" rows="5" name="config_value" placeholder="请输入配置值" >' + str + '</textarea>');
                break;
        }
    }
</script>
{/block}